<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }
        /*搜索按钮*/

        .search_box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.45rem 0.75rem;
            background-color: #fff;
            padding: 0.4rem 0;
            border-radius: 0.1rem;
        }

        .search_box img {
            width: 0.625rem;
            margin-right: 0.25rem;
        }

        .search_box span {
            font-size: 0.7rem;
            color: #999;
        }
        /*列表状态*/

        .waiting_friend_list li {
            position: relative;
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 0.5rem 0.75rem;
        }

        .waiting_friend_list li::after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            background: #edeae8;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .waiting_friend_list li .waiting_friend_name {
            flex: 1;
            font-size: 0.8rem;
            color: #333;
        }

        .waiting_friend_list li span.waiting_txt {
            font-size: 0.7rem;
            color: #999;
        }

        .waiting_friend_list li span.waiting_btn {
            padding: 0.35rem 0.55rem;
            background-color: #f2f2f2;
            border: 1px solid #e6dcdc;
            box-sizing: border-box;
            border-radius: 1rem;
            font-size: 0.7rem;
            color: #333;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="waiting_friend_box">
            <div class="search_box">
                <img src="../../image/four/search.png" alt="">
                <span>搜索</span>
            </div>



            <ul class="waiting_friend_list">
                <li v-for="item in list">
                    <div :style="'background:url('+item.head_img+') center/cover no-repeat;width:1.5rem;height:1.5rem;margin-right:0.75rem;'"></div>
                    <span v-if="item.username" class="waiting_friend_name">{{item.username}}</span>
                    <span v-else class="waiting_friend_name">该用户很懒，没有填写名字</span>
                    <span v-if="item.type == 0" class="waiting_txt">等待验证</span>
                    <span v-else-if="item.type == 1" class="waiting_txt" @click="open_new_win('one','详细资料','验证','',item.user_id,item.type,item.friend_log_id)">已添加</span>
                    <span v-else-if="item.type == 2" class="waiting_btn" @click="agree(item.friend_log_id,$event)">同意</span>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
      var app = new Vue({
        el:'#app',
        data:{
          page: 1,
          token: '',
          list: []
        },
        created:function() {
          var $_this=this;
          $_this.token = $api.getStorage('token') || toString('');
        },
        mounted:function(){
          var $_this = this;
          $_this.get_datas();
        },
        methods: {
          // 打开对应页面的头部
          open_new_win:function(index, title, type, img_src,target_id,is_friend,agree_id) {
              api.openWin({
                  name: 'four_' + index + "header" + index,
                  url: './four_headers/four_' + index + '_header.html',
                  pageParam: {
                      title: title,
                      type: type,
                      img_src: img_src,
                      target_id:target_id,
                      is_friend:is_friend,
                      agree_id:agree_id
                  }
              });
          },

          // 同意添加好友的方法
          agree:function(id,ev){
            console.log(1);
            ev.stopPropagation();
            var $_this = this;
            api.ajax({
              url: window.Url.Community_newFriendAgree,
              method: 'post',
              data: {
                values:{
                  token:$_this.token,
                  friend_log_id:id
                }
              }
            }, function(ret, err) {
                if (ret) {
                    console.log(JSON.stringify(ret.info))
                    if(ret.re==1){
                      window.location.reload();
                    }
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          },

          get_datas:function(){
            var $_this = this;

            api.ajax({
              url: window.Url.Community_newFriendList,
              method: 'post',
              data: {
                values:{
                  token:$_this.token,
                  page:$_this.page
                }
              }
            }, function(ret, err) {
                if (ret) {
                  // console.log(JSON.stringify(ret.data.list))
                  if(ret.re==1){
                    $_this.list = ret.data.list
                  }
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
          },

          scroll_load:function(){
            var $_this = this;
            var scroll = new auiScroll({
                  listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                  distance: 40 //判断到达底部的距离，isToBottom为true
              }, function(ret) {
                  if (ret.isToBottom) {
                      $_this.page++
                      api.ajax({
                        url: window.Url.Community_newFriendList,
                        method: 'post',
                        data: {
                          values:{
                            token:$_this.token,
                            page:$_this.page
                          }
                        }
                      }, function(ret, err) {
                          if (ret) {
                            // console.log(JSON.stringify(ret.data.list))
                            if(ret.re==1){
                              $_this.list = $_this.list.concat(ret.data.list);
                            }
                          } else {
                              api.alert({ msg: JSON.stringify(err) });
                          }
                      })
                  }

              });
          }
        }
      })

    };




</script>

</html>
